const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin"); // 压缩css
const UglifyWebpackPlugin = require("uglifyjs-webpack-plugin"); // 压缩js
const CleanWebpackPlugin = require("clean-webpack-plugin");
const commonConfig = require("./webpack.common.js");
const merge = require("webpack-merge");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
  .BundleAnalyzerPlugin;

let devConfig = {
  mode: "development",
  devtool: "source-map",
  module: {
    rules: [
      {
        test: /\.css|.styl|.less$/,
        use: [
          { loader: MiniCssExtractPlugin.loader },
          { loader: "css-loader" },
          { loader: "stylus-loader" },
          {
            loader: "postcss-loader"
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html",
      minify: {
        collapseWhitespace: true, // 压缩空白
        removeComments: true, // 移除注释
        removeAttributeQuotes: true // 移除属性的引导
      }
    }),
    new MiniCssExtractPlugin({
      // 类似 webpackOptions.output里面的配置 可以忽略
      filename: "[name].[hash].css",
      chunkFilename: "[id].[hash].css"
    }),
    new CleanWebpackPlugin(["dist"]), // 删除生成的dist目录
    // new BundleAnalyzerPlugin() // 打包模块报表
  ],
  optimization: {
    minimizer: [
      new OptimizeCssAssetsPlugin({}),
      new UglifyWebpackPlugin({
        cache: true,
        parallel: true,
        sourceMap: false
      })
    ]
  },
  devServer: {
    contentBase: path.join(__dirname, "./dist"),
    open: false,
    port: 9000,
    hot: false
  }
};

module.exports = merge(commonConfig, devConfig);
